<template>
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="show" label-width="68px">
        <el-form-item label="用户名称" prop="userName">
            <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px"
                @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="queryParams.mobile" placeholder="请输入手机号码" clearable style="width: 240px"
                @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="用户状态" clearable style="width: 240px">
                <el-option v-for="dict in status_dict" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
            <el-button :icon="Refresh" @click="formReset">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { Search, Refresh } from '@element-plus/icons-vue';
import { status_dict } from '@/constant/dict'
import useApp from '@/hooks'
const { $, proxy} = useApp()
const handleQuery = inject('handleQuery')
const emit = defineEmits(['update:value'])
const queryRef = ref(null)
const props = defineProps({
    value: {
        type: Object
    },
    show:{
        type:Boolean,
        default:true
    }
})
const queryParams = computed({
    get: () => {
        return props.value
    },
    set: (e) => {
        emit('update:value',e)
    }
});
/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    // fix 表单重置
    queryParams.value.deptId = null;
    handleQuery();
}
// 表单重置
function formReset(){
    proxy.resetForm("queryRef");
    resetQuery()
}
</script>